<template>
  <div class="userscore-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="积分余额" left-arrow @click-left="$router.back()"/>
    <div class="score-balance">
      <div class="num-box">
        <span class="num">{{user ? user.currentScore : 0}}</span>
        <span class="tip">当前积分</span>
      </div>
    </div>
    <!-- 积分类型 -->
    <div class="score-tab-box">
      <van-tabs class="score-tab" sticky swipeable color="#e6b873" line-height="2" v-model="active">
        <van-tab title="全部">
          <userScoreList :status="-1"></userScoreList>
        </van-tab>
        <van-tab title="收入">
          <userScoreList :status="0"></userScoreList>
        </van-tab>
        <van-tab title="支出">
          <userScoreList :status="1"></userScoreList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import userScoreList from './components/useScoreList.vue'

export default {
  components: {
    userScoreList
  },
  name: 'userScore',
  data () {
    return {
      active: 0
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="scss">
.userscore-container{
  .score-balance{
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: 240px;
    background: linear-gradient(180deg,#efc480,#f8dca5 57%,#fff);
    display: flex;
    justify-content: center;
    padding-top: 25px;
    box-sizing: border-box;
    .num-box{
      height: 155px;
      width: 155px;
      background: url('') no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      flex-direction: column;
      .num{
        margin-top: 65px;
        color: #a8700d;
        font-size: 18px;
      }
      .tip{
        background: linear-gradient(90deg,#e9b461,#eecc89);
        color: #a8700d;
        padding: 5px 15px;
        font-size: 13px;
        border-radius: 10px;
        margin-top: 15px;
      }
    }
  }
  .score-tab-box{
    position: relative;
    top: 200px;
    left: 0;
    z-index: 3;
    width: 100%;
    .score-tab{
      /deep/ .van-tabs__nav--line{
        border-radius: 10px;
      }
    }
  }

}
</style>
